<template>
  <div class="container">
    <div class="item">
      <ul v-for="(itemMenu, indexMenu) in listMenu" :key="indexMenu">
        <div v-if="item.show" v-for="(item, index) in itemMenu.listData" :key="index" class="list-item">
          <li v-if="item.show" @click="itemClick(index, indexMenu)" class="flex v-align-c">
            <div class="info flex-item">
              {{item.name}}
            </div>
            <div class="operation flex v-align-c">
              <label>{{item.text}}</label>
              <icon class="iconfont icon-arrow-right font-12 mar-l-6"></icon>
            </div>
          </li>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import { getShowEnterpriseAndSellFlag } from '@/api/distribution'
import { getDistributionType } from '@/api/personal'
export default {
  data() {
    return {
      dataEnterprise: {},
      categoryId: '',
      listMenu: [
        {
          listData: [
            {
              name: '店铺设置',
              text: '设置店铺门店信息',
              show: true
            }
          ]
        },
        {
          listData: [
            {
              name: '分类',
              text: '设置商品分类',
              show: true
            },
            {
              name: '商品',
              text: '上架的商品都在这里',
              show: true
            }
            // {
            //   name: '推荐',
            //   text: '设置商品到首页的店主推荐里',
            //   show: true
            // }
          ]
        }
      ],
      checkClass: 'check',
      shopPushBoolean: false
    }
  },
  onLoad(option) {
  },
  // 监听上传是否完成
  watch: {
  },
  onShow() {
    this.$pt.removeStorageSync('sellList')
  },
  mounted() {
    this.categoryId = this.getCurrentPage().query.categoryId
    if (typeof (this.categoryId) === 'undefined') {
      this.categoryId = ''
    }
    this.initEls()
  },
  methods: {
    initEls() {
      getShowEnterpriseAndSellFlag(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.dataEnterprise = response.data
        this.listMenu.forEach((item, index) => {
          if (index === 2) {
            item.listData.forEach((itemList, indexList) => {
              if (this.dataEnterprise.showSellFlag === 1) {
                if (indexList === 0) {
                  itemList.show = true
                }
              }
              if (this.dataEnterprise.showEnterpriseFlag === 1) {
                if (indexList === 1) {
                  itemList.show = true
                }
              }
            })
          }
        })
      }).catch(() => {
      })
      getDistributionType(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.listMenu.forEach((item, index) => {
          if (index === 0) {
            item.listData.forEach((itemList, indexList) => {
              if (indexList === 1) {
                if (response.data === 1) {
                  itemList.show = true
                } else {
                  itemList.show = false
                }
              }
            })
          }
        })
      }).catch(() => {
      })
    },
    itemClick(e, type) {
      if (type === 0) {
        if (e === 0) {
          this.$pt.removeStorageSync('storeLogo')
          this.$pt.setStorageSync('storeInfo', 'storeInfo')
          this.$pt.navigateTo({url: '/pages/home/shop-setting/main'})
        }
      } else if (type === 1) {
        if (e === 0) {
          this.$pt.navigateTo({url: '/pages/home/category/main'})
        } else if (e === 1) {
          this.$pt.navigateTo({url: '/pages/home/management/main?categoryId=' + this.categoryId})
        } else if (e === 2) {
          this.$pt.navigateTo({url: '/pages/home/recommend/main'})
        }
      } else if (type === 2) {
        if (e === 0) {
          this.$pt.navigateTo({url: '/pages/personal/distribution/list/main'})
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f6f6f6;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.tig {
  padding-left: 20px;
  padding-right: 8px;
  height: 30px;
  background: #fdc807;
  color: #333333;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 6px solid #f6f6f6;
  .check {
    width: 85px;
    height: 23px;
    font-size: 12px;
    color: #fff;
    background: #333333;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .uncheck {
    width: 85px;
    height: 23px;
    font-size: 12px;
    color: #cccccc;
    background: #AEAEAE;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.item {
  ul{
    margin-bottom: 6px;
    background: #ffffff;
  }
  .list-item{
    &:last-child{
      li{
        border-bottom: none;
      }      
    }
  }
  li {
    margin: 0 15px;  
    background: #ffffff;
    border-bottom: #e5e5e5 1px solid;
    height: 51px;    
    .info {
      font-size: 16px;
      color: #333333;
    }
    .operation {
      font-size: 12px;
      color: #AEAEAE;
      .access {
        width: 5px;
        height: 11px;
        margin-left: 10px;
      }
    }
  }
}
</style>
